/**
 * @description  流动性控制
 * @author zls
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import { SecondHeaderC, TableC, FirstHeaderC } from '../../../comps';
import Style from './style.less';
import ketou from '../../../assets/busi/reportingServices/tick_icon.png';
import buketou from '../../../assets/busi/reportingServices/cross_icon.png';
import columnsDict from './columnsDict';

class liquidityControl extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {}

  UNSAFE_componentWillReceiveProps(nextProps) {}

  //获取columns
  getColumns = (title) => {
    let columns = [];
    columnsDict.map((item) => {
      if (item.title == title) {
        columns = item.columns;
      }
    });
    return columns;
  };
  //明细打开关闭 type ==》false true  row当前条目相关数据
  changeStatus = (type, row) => {
    let data = this.props.data;
    data.map((item) => {
      if (item.title == row.title) {
        item.showDetail = type;
      }
    });
    this.props.changeData(data);
  };
  render() {
    const { data } = this.props;
    const { cashManagementReportM } = this.props;
    const { securityBondTypeList } = cashManagementReportM;
    const iconInfo = {
      0: {
        className: 'prohibit',
        img: buketou,
        name: '禁止',
      },
      1: {
        className: 'adopt',
        img: ketou,
        name: '通过',
      },
    };

    return (
      <>
        <div name={'xjgl-pdf'} style={{ marginBottom: '16px' }}>
          <FirstHeaderC title='流动性控制' bottomHeight={false} />
        </div>

        {data &&
          data.map((r, index) => {
            return (
              <div key={index}>
                {r?.title && (
                  <div name={'xjgl-pdf'} style={{ marginBottom: '16px' }}>
                    <SecondHeaderC
                      title={r.title}
                      Left={
                        <div className={Style[iconInfo[r.state]?.color]} style={{ marginLeft: '20px' }}>
                          {' '}
                          <img src={iconInfo[r.state]?.img} /> {iconInfo[r.state]?.name}
                        </div>
                      }
                      bottomHeight={false}
                      arrowBtn={r.dataSource?.length ? true : false}
                      arrowBtnPosition={'right'}
                      arrowBtnTxt={'明细'}
                      showContent={r?.showDetail}
                      onExpendClick={(e) => this.changeStatus(e, r)} //展开箭头按钮事件
                    />
                  </div>
                )}
                {r?.showDetail && (r?.dataSource?.length != 0 || this.props.loading) && (
                  <div name={'xjgl-pdf'} isTable='true' style={{ marginBottom: '16px' }}>
                    <TableC
                      columns={
                        this.getColumns(r.title)
                          ?.map((x) => {
                            //资产类型
                            if (x.key === 'type') {
                              return {
                                ...x,
                                width: 80,
                                render: (text) => securityBondTypeList?.filter((r) => r.code == text)[0]?.value || '--',
                              };
                            }
                            if (x.key == 'currentamount') {
                              return {
                                ...x,
                                type: 'number',
                              };
                            }
                            if (x.key == 'netvaluation' || x.key == 'totalvaluation' || x.key == 'marketvalue') {
                              return {
                                ...x,
                                type: 'money',
                              };
                            }
                            if (x.key == 'weightcoefficient') {
                              return {
                                ...x,
                                align: 'right',
                              };
                            }
                            return x;
                          })
                          ?.concat([{ dataIndex: 'konglie', title: '', key: 'konglie', render: () => '' }]) //添加空列，解决表格导出的样式问题
                      }
                      dataSource={r?.dataSource || []}
                      hidePage={true}
                      rowKey={(key) => `${index}-${key.id}`}
                      rowClassName={(record) => {
                        return record.isRealHold === '0' ? `${Style.redCls}` : `table-row`;
                      }}
                    ></TableC>
                  </div>
                )}
              </div>
            );
          })}
      </>
    );
  }
}
export default connect(({ cashManagementReportM, loading }) => ({
  cashManagementReportM,
  loading: loading.effects['cashManagementReportM/queryReport'],
}))(liquidityControl);
